{extend name="common/menu_child" /}

{block name="nav"}
<span class="layui-breadcrumb">
	<a>基础信息</a>
	<a href="{:url('index')}">首页广告</a>
	<a><cite>添加</cite></a>
</span>
{/block}

{block name="body"}
<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="x-red">*</span>标题</label>
		<div class="layui-input-inline">
			<input type="text" name="title" lay-verify="required" maxlength="20" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid layui-word-aux">定义一个标题，方便记忆</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="x-red">*</span>图片</label>
		<div class="layui-input-inline" style="width:400px;">
			<p style="padding:9px 0px 9px 0px;color:#999;">上传一张尺寸为 {$banner.width} x {$banner.height} 的图片，大小不超过{$banner.size}KB</p>
			<div title="upoad_banner">
				<a title="upoad_banner" href="javascript:void(0);" style="display:inline-block;padding:11px 15px;float:left;border:1px solid #ccc;">+</a>
				<templet title="upoad_banner" style="display:none;">
					<div style="display:inline-block;width:38px;height:38px;float:left;border:1px solid #ccc;margin-left:2px;">
						<image width="100%" height="100%" src="" />
						<input style="display:none;" value="" />
					</div>
				</templet>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<button  class="layui-btn" lay-filter="save" lay-submit>保存</button>
	</div>
</form>
{/block}

{block name="javascript"}
<script type="text/javascript">

	layui.use(['form', 'layer', 'upload'], function(){
		layui.upload.render({
			elem: 'a[title=upoad_banner]',
			url: '{:url("Upload/image")}',
			data: {type: 'banner'},
			exts: '{$banner.type}',
			size: {$banner.size},
			before: function(){
				layer.load();
			},
			done: function(res){
				layer.closeAll();
				layer.msg(res.message);
				switch(res.errno){
					case 0 :
						let templet = $('templet[title=upoad_banner]').children().clone();
						$(templet).children('img').attr('src', res.data.file_url);
						$(templet).children('input').attr('value', res.data.file_url);
						$(templet).children('input').attr('name', 'image');
						$('div[title=upoad_banner]').append(templet);
						$('a[title=upoad_banner]').hide();
						break;
				};
			},
			error: function(){
				layer.closeAll();
				layer.msg('意外错误，请联系管理员');
			}
		});
		
		layui.form.on('submit(save)', function(e){
			
			if(undefined === e.field.image){
				layer.msg('请上传图片');
				return false;
			};
			
			let data = {
				title: e.field.title,
				image: e.field.image,
			};
			action_post_json('', data, function(response){
				layer.msg(response.message);
				switch(response.errno){
					case 0 :
						setTimeout(function(){
							window.location.href='{:url("index")}';
						}, 1000);
						break;
				};
			});
		
			return false;
		});
	});
	
	
</script>
{/block}